<template>
    <div class="loging">
        <div class="loging_div">
            <el-card>
                <h3>智能制造平台</h3>
                <p>
                    <!-- 利用三元运算符判定点击了哪个登录,从而绑定样式 -->
                    <el-button class="login_div_butt" :class="isShowIndex === 0 ? 'isShowTitle' : ''" type="info" @click="Logintab">域账号登录</el-button>
                    <el-button class="login_div_butx" :calss="isShowIndex === 1 ? 'isShowTitle' : ''" type="info" @click="Logintar">工号登录</el-button>
                </p>
                <el-form v-if="tab" ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px">
                    <el-form-item class="login_div_form_item" label="账号：">
                        <el-input v-model="loginForm.username" type="text" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item class="login_div_form_item" label="密码：">
                        <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" @keyup.enter.native="handleLogin"></el-input>
                    </el-form-item>
                    <el-form-item class="el-form-item__content">
                        <el-button class="login_div_form_butt" @click.notive.prevent="handleLogin">登录</el-button>
                    </el-form-item>
                </el-form>
                <el-form v-else ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px">
                    <el-form-item class="login_div_form_item" label="工号：">
                        <el-input v-model="loginForm.uuid" placeholder="请输入工号"></el-input>
                    </el-form-item>
                    <el-form-item class="el-form-item__content">
                        <el-button class="login_div_form_butt" @click.native.prevent="handleLoginfanke">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <div class="loging_footer">
            <span>Copyright © 2018-2022 ICT.riming All Rights Reserved.</span>
        </div>
    </div>
</template>

<script>
import { login, getCodeImg, getverifyEmpNo } from "@/api/login";
import Cookies from "js-cookie";
// 加密与解密的方法
import { encrypt, decrypt } from '@/utils/jsencrypt';
export default {
    data () {
        return {
            // 用于实现切换登录,作为判断
            tab: true,
            isShowIndex: 0,
            // 个人信息
            loginForm: {
                username: "",
                password: "",
                rememberMe: false,
                code: "",
                uuid: "",
            },
            // 验证信息
            loginRules: {
                username: [
                    {required: true,trigger: "blur",message: "请输入账号"}
                ],
                password: [
                    {required: true,trigger: "blur",message: "请输入密码"}
                ],
                code: [
                    {required: true,trigger: "change",message: "请输入验证码"}
                ],
                uuid: [
                    {required: true, trigger: "blur", message: "请输入工号"}
                ],
            },
            loading: false,
            // 验证码开关
            captchaOnOff: true,
        }
    },
    created () {
        this.getCode();
        this.getCookie();
    },
    methods: {
        // 域账号登录
        Logintab() {
            this.tab = true;
            this.isShowIndex = 0;
        },
        // 工号登录
        Logintar() {
            this.tab = false;
            this.isShowIndex = 1;
        },
        // 验证码
        getCode() {
            getCodeImg().then(res => {
                this.captchaOnOff = res.captchaOnOff = undefined ? true : res.captchaOnOff;
                if(this.captchaOnOff) {
                    // 把返回的图片拼接base64编码的gif图片数据
                    this.codeUrl = "data:image/gif;base64," + res.img;
                    this.loginForm.uuid = res.uuid;
                }
            });
        },
        // 获取Cookie的个人信息
        getCookie() {
            const username = Cookies.get("username");
            const password = Cookies.get("password");
            const rememberMe = Cookies.get("rememberMe");
            this.loginForm = {
                username: username === undefined ? this.loginForm.username : username,
                // 对password进行加密
                password: password === undefined ? this.loginForm.password : decrypt(password),
                rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
            }
        },
        // 域账号登录方法
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if(valid) {
                    this.loading = true;
                    console.log("获取登录信息",this.loginForm);
                    if(this.loginForm.password) {
                        // Cookies有效期30天
                        Cookies.set("username",this.loginForm.username,{expires: 30});
                        Cookies.set("password",encrypt(this.loginForm.password),{expires: 30});
                    }else {
                        Cookies.remove("username");
                        Cookies.remove("password");
                    }
                    this.$store.dispatch("Login",this.loginForm).then(() => {
                        console.log("测试重定向",this.redirect);
                        this.$router.push({path: this.redirect || "/"}).catch(() => {});
                    }).catch(() => {
                        this.loading = false;
                        if(this.captchaOnOff) {
                            this.getCode();
                        }
                    });
                }
            });
        },
        // 工号登录方法
        handleLoginfanke() {
            // 登录
            // this.$router.push({path: this.redirect || "/"}).catch(() => {});
            // 获取Cookie个人信息
            this.$store.dispatch("Login",this.loginForm).then(() => {
                console.log("测试重定向",this.redirect);
                this.$router.push({path: this.redirect || "/"}).catch(() => {});
            }).catch(() => {
                this.loading = false;
                if(this.captchaOnOff) {
                    this.getCode();
                }
            });
        },
    }
}
</script>

<style scoped>
* {
    margin: 0px;
    padding: 0px;
}
.loging {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-image: url("../assets/images/login-background.jpg");
    background-size: cover;
}
.loging_div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 390px;
    height: 180px;
    border: 1px solid rgb(238, 238, 238);
    border-radius: 5px;
    background-color: #f4f4f4;
}
h3 {
    margin: 0px auto 10px auto;
    text-align: center;
}
p {
    margin: 0px auto 10px auto;
    text-align: center;
}
.login_div_butt {
    padding: 10px 20px;
    margin: 0px;
    font-size: 16px;
    border-radius: 6px 0px 0px 6px;
}
.login_div_butx {
    padding: 10px 25px;
    margin: 0px;
    font-size: 16px;
    border-radius: 0px 6px 6px 0px;
}
.login_div_form_item {
    margin: 10px;
}
.login_div_form_butt {
    padding: 10px 25px;
}
.login_div_form_butx {
    padding: 10px 25px;
}
.el-form-item__content {
    margin: 0px 0px 0px 40px !important;
}
.loging_footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0px;
    width: 100%;
    text-align: center;
}
</style>